export let MyTrigger = {
  tagName: 'u-trigger',
  template: `<div class="u-trigger" @click="toggle">
<!--    {{state}}-->
      <div :hidden="state !== 'yes'"><slot name="yes"></slot></div>
      <div :hidden="state === 'yes'"><slot name="no"></slot></div>
    <slot></slot>
  </div>`,
  props: {
    checked: Boolean
  },
  watch: {
    checked(newVal) {
      this.state = newVal ? 'yes' : 'no'
    }
  },
  data() {
    return {
      state: this.checked ? 'yes' : 'no',
    }
  },
  methods: {
    toggle() {
      if (this.state === 'yes') {
        this.state = 'no'
      } else {
        this.state = 'yes'
      }
    }
  }
}
